<template>
  <div class="main">
    <div class="device" @click="toMain">
      <div class="dleft">
        <span style="font-weight: 500">ESP32设备</span>
        <!-- <img style="width: 10vw;" src="@svg/device.svg"/> -->
      </div>
      <div class="dmid">
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/id.svg"
          />&nbsp;ID: {{ deviceData.ID }}</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/device.svg"
          />&nbsp;在线状态: {{ deviceData.Online }}</span
        >
      </div>
      <div class="dright">
        <canvas class="rstate" :style="status"></canvas>
      </div>
    </div>
  </div>
</template>

<script>

//import { Dialog } from 'vant';
import { Toast } from "vant";
export default {
  //name: "Lab-1",
  props: {
    id: Number,
    pub: String,
    sub: String,
  },
  components: {},
  created: function () {
    console.log(this.pub);
    this.mqttMsg();
    this.times = setInterval(this.showTime, this.deviceData.UpdateDelay * 1000);
  },
  data() {
    return {
      status: { "background-color": "red" },
      gpioc: "",
      modec: "",
      setAc: "",
      isLoad: false,
      checked: false,
      show: true,
      value: 0,
      send: "",
      param: "",
      flag: true,
      num: "",
      times: "",
      deviceData: {
        ID: this.id,
        Online: "离线",
        R1: false,
        R2: false,
        R3: false,
        R4: false,
        RS485_1:"--",
        RS485_2:"--",
        RS485_3:"--",
        R1Load: false,
        R2Load: false,
        R3Load: false,
        R4Load: false,

        UpdateDelay: 5000,
      },
    };
  },
  methods: {
    showTime() {
      console.log("Tigger");
      var send = {};
      send["GetStaus"] = "true";
      this.$mqtt.publish(this.sub, send);
      this.status = { "background-color": "red" };
      this.deviceData.R1Load = false;
      this.deviceData.R2Load = false;
      this.deviceData.R3Load = false;
      this.deviceData.R4Load = false;
      this.deviceData.RS485_1="--"
      this.deviceData.RS485_2="--"
      this.deviceData.RS485_3="--"
      this.deviceData.Online = "离线";
      clearInterval(this.times);

    },
    toMain() {
      this.$router.push({
        name: "cdevice1_index",
        params: {
          pub: this.pub,
          sub: this.sub,
          deviceData: this.deviceData,
          routerType: "push",
        },
      });
    },
    mqttMsg() {
      // 接收消息处理
      this.$mqtt.message(this.pub, (topic, message) => {
        this.status = { "background-color": "rgb(0, 255, 55)" };
        this.deviceData.Online = "在线";

        clearInterval(this.times);
        this.times = setInterval(
          this.showTime,
          this.deviceData.UpdateDelay + 2000
        );

        console.log(message.toString()); //控制台显示接收到的数据
        this.data = message.toString();
        try {
          this.res = JSON.parse(message.toString());
          this.deviceData.ID = this.res.ID;

          if (this.deviceData.R1Load) {
            if (this.deviceData.R1 === this.res.R1) {
              this.deviceData.R1Load = false;
              Toast({
                message: "开关1设定成功",
                position: "bottom",
              });
            }
            else{
              Toast({
                message: "开关1设定中",
                position: "bottom",
              });
              this.deviceData.R1Load = false;
            }
            
          }
          else if (this.deviceData.R2Load) {
            if (this.deviceData.R2 === this.res.R2) {
              this.deviceData.R2Load = false;
              Toast({
                message: "开关2设定成功",
                position: "bottom",
              });
            }
            else{
              Toast({
                message: "开关2设定中",
                position: "bottom",
              });
              this.deviceData.R2Load = false;
            }
          }
          else if (this.deviceData.R3Load) {
            if (this.deviceData.R3 === this.res.R3) {
              this.deviceData.R3Load = false;
              Toast({
                message: "开关3设定成功",
                position: "bottom",
              });
            }
           else{
              Toast({
                message: "开关3设定中",
                position: "bottom",
              });
              this.deviceData.R3Load = false;
            }
          }
          else if (this.deviceData.R4Load) {
            if (this.deviceData.R4 === this.res.R4) {
              this.deviceData.R4Load = false;
              Toast({
                message: "开关4设定成功",
                position: "bottom",
              });
            }
            else{
              Toast({
                message: "开关4设定中",
                position: "bottom",
              });
              this.deviceData.R4Load = false;
            }
          }

          this.deviceData.R1 = this.res.R1;
          this.deviceData.R2 = this.res.R2;
          this.deviceData.R3 = this.res.R3;
          this.deviceData.R4 = this.res.R4;
          this.deviceData.RS485_1 = this.res.RS485_1;
          this.deviceData.RS485_2 = this.res.RS485_2;
          this.deviceData.RS485_3 = this.res.RS485_3;
          if (this.res.UpdateDelay !== undefined) {
            this.deviceData.UpdateDelay = this.res.UpdateDelay+2000;
          }
          console.log(this.deviceData.UpdateDelay);
        } catch (err) {
          console.log(err.message);
        }
      });
    },
  },
};
</script>
<style scoped>
.rstate {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  /* background-color:  rgb(0, 255, 55); */
  box-shadow: 0 0 5px 0 rgba(82, 82, 82, 0.658);
}
.content {
  padding: 10px 16px;
}
.main {
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 20px 10px 20px;
}
.device {
  transition: 0.3s;
  position: relative;
  z-index: 1;
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: left;
  align-items: center;
  border-radius: 20px;
  text-align: left;
  padding: 10px 10px;
  box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
